<template>
  <div class="view-fill">
    <div v-if="!modifyInfo.visible" class="app-container-flex">
      <FullScreen
        v-model="showDialog"
        title="项目需求详情"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button
            v-if="$permission('biddingParameter:update')"
            @click="update"
            >修改</el-button
          >
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList" />
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>明细信息</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                v-model:data="tableInfo.data"
                :pager="false"
                :checkBox="false"
                :tab-index="true"
                :isDynamic="true"
                :spanMethod="spanMethod"
                :field-list="tableInfo.fieldList"
              >
              </PageTable>
            </div>
          </div>
        </div>
      </FullScreen>
    </div>

    <Modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :orderId="modifyInfo.orderId"
      :title="modifyInfo.title"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup>
const Modify = defineAsyncComponent(() => import('./modify'))
import { getParameterById, getParameterAll } from '@/api/bidding.js'
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'orderId'])
const infoList = ref({
  data: [],
  fieldList: [
    { label: '项目名称', value: 'name', type: 'text' },
    { label: '项目类别', value: 'projectTypeValue', type: 'text' },
    { label: '备注', value: 'remark', type: 'text' },
  ],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    biddingParameterId: props.orderId,
  },
})
const modifyInfo = ref({
  visible: false,
  title: '',
  orderId: '',
})
// 表格相关
const tableInfo = ref({
  api: null,
  data: [],
  fieldList: [
    {
      label: '需求类型',
      value: 'requirementType',
      width: '300px',
    },
    {
      label: '重要程度',
      value: 'importanceTypeValue',
      width: '200px',
    },
    {
      label: '需求描述',
      value: 'requirement',
    },
  ],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})

onMounted(() => {
  if (props.orderId) {
    getMain()
  }
})
function returnModify() {
  getMain()
}
function returnBack() {
  proxy.$emit('returnBack', false)
}
function spanMethod({ row, column, rowIndex, columnIndex }) {
  let len = tableInfo.value.fieldList.length
  if (row.groupKey) {
    let afterIndexs = []
    let keys = new Array(len + 2)
    if (afterIndexs.length && afterIndexs.includes(columnIndex)) {
      keys[columnIndex] = 'groupKey'
    } else {
      keys = ['groupKey', 'requirementType']
    }
    // 注意:字段列表要按表格排列的顺序排列,如果后续字段不再需要进行行合并,可以省略后面的字段,如果中间某字段要跳过合并,要用空字符串顶位
    return proxy.$fn.spanMethod(
      tableInfo.value.data,
      keys,
      rowIndex,
      columnIndex
    )
  }
}
//更新
function update() {
  modifyInfo.value.orderId = infoList.value.data.id
  modifyInfo.value.title = '修改项目需求'
  modifyInfo.value.visible = true
}
function getMain() {
  getParameterById(props.orderId).then((resp) => {
    if (resp && resp.success) {
      infoList.value.data = resp.data
    }
  })
  getList()
}
function getList() {
  getParameterAll(filterInfo.value.query).then((res) => {
    if (res && res.success) {
      if (res.data && res.data.length) {
        res.data.forEach((item) => {
          item.groupKey = item.requirementType
        })
      }
      tableInfo.value.data = res.data
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.table-scroll-hidden) > .el-table {
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
